<template>
	<a-modal
		:visible="props.visible"
		title="财务审批"
		:footer="null"
		:width="1200"
		@cancel="emits('update:visible', false)"
	>
		<a-tabs
			v-if="transStatus"
			v-model:activeKey="activeKey"
			class="relative top-[-15px]"
			:tabBarStyle="{ marginBottom: 0 }"
			@change="onTabChange"
		>
			<a-tab-pane :key="0" tab="新合同"></a-tab-pane>
			<a-tab-pane :key="1" tab="历史合同"></a-tab-pane>
		</a-tabs>

		<div v-for="(item, index) in contractInfoList" :key="item.id">
			<h2 v-if="contractInfoList.length > 1">合同{{ index + 1 }}：</h2>
			<!-- 基本信息 -->
			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">基本信息</div>
			<div class="flex flex-wrap gap-4 my-6">
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">合同编号</span><span class="ml-3">{{ item.code || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">合同模板</span><span class="ml-3">{{ item.templateName || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">合同状态</span
					><span class="ml-3">{{ $TOOL.dictTypeData('APPROVAL_STATUS', item.contractStatus) }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">签约方式</span><span class="ml-3">{{ signMethodEnum[item.signMethod] }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">签约场景</span
					><span class="ml-3">{{ $TOOL.dictTypeData('SignPayment', item.signPayment) }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate">
					<span class="text-gray-500">合同创建人</span><span class="ml-3">{{ item.createUserName || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/2)] truncate">
					<span class="text-gray-500">创建时间</span><span class="ml-3">{{ item.createAt || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/1)] truncate">
					<span class="text-gray-500">合同备注</span
					><span class="ml-3" style="white-space: normal">{{ item.remark || '-' }}</span>
				</div>
				<div v-if="activeKey" class="w-[calc((100%-50px)/1)] truncate">
					<span class="text-gray-500">签约日期</span
					><span class="ml-3" style="white-space: normal">{{ item.signingDate || '-' }}</span>
				</div>
				<div class="w-[calc((100%-20px)/2)] truncate" style="display: flex; align-items: flex-start">
					<span class="text-gray-500">付款凭证</span
					><span class="ml-3 relative">
						<media-section :url-str="item.voucherImg" />
					</span>
				</div>
				<div class="w-[calc((100%-20px)/2)] truncate" style="display: flex; align-items: flex-start">
					<span class="text-gray-500">合同照片</span
					><span class="ml-3">
						<media-section :url-str="item.contractImg" />
					</span>
				</div>
			</div>
			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">签约方信息</div>
			<div class="flex flex-wrap gap-4 my-6">
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">甲方抬头</span
					><span style="white-space: normal">{{ item.firstParty || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">甲方联系人/法人</span><span>{{ item.firstPartyPerson || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">甲方联系电话</span><span>{{ item.firstPartyMobile || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">甲方地址</span
					><span style="white-space: normal">{{ item.firstPartyAddress || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">乙方抬头</span
					><span style="white-space: normal">{{ item.secondPartyName || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">乙方联系人</span><span>{{ item.secondPartyPerson || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">乙方联系电话</span><span>{{ item.secondPartyMobile || '-' }}</span>
				</div>
				<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
					<span class="text-gray-500">乙方送达地址</span
					><span style="white-space: normal">{{ item.secondPartyAddress || '-' }}</span>
				</div>
			</div>

			<!-- 订单信息 -->
			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">订单信息</div>
			<a-table
				:columns="activeKey ? historyColumns : columns"
				:data-source="item.list"
				:scroll="{ x: 1200 }"
				:pagination="false"
				size="small"
				class="mt-[20px]"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'businessType'">
						{{ $TOOL.dictTypeData('BUSINESS_TYPE', record.businessType) }}
					</template>
					<template v-if="column.dataIndex === 'depositAmount'">
						{{ record.paymentMethod === 'FULL' ? '-' : record.depositAmount || '-' }}
					</template>
					<template v-if="column.dataIndex === 'balancePayment'">
						{{ record.paymentMethod === 'FULL' ? '-' : record.balancePayment || '-' }}
					</template>
				</template>
			</a-table>
			<div class="flex flex-wrap gap-4 my-6 relative top-[-12px]">
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">付款类型</span
					><span>{{ $TOOL.dictTypeData('PAYMENT_METHOD', item.paymentMethod) }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">合同总金额</span><span>{{ item.contractAmount ?? '-' }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">定金总金额</span
					><span>{{ item.paymentMethod === 'FULL' ? '-' : item.depositAmount ?? '-' }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">尾款总金额</span
					><span>{{ item.paymentMethod === 'FULL' ? '-' : item.balancePayment ?? '-' }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">尾款结算日期</span
					><span>{{ item.paymentMethod === 'FULL' ? '-' : item.balancePaymentTime ?? '-' }}</span>
				</div>
			</div>

			<div v-if="!activeKey && transStatus" class="flex flex-wrap gap-4 my-6 relative top-[-12px]">
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">合同转换抵扣金额</span><span>{{ item.transDeductionAmount ?? '-' }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">实际支付金额</span><span>{{ item.orderAmount ?? '-' }}</span>
				</div>
				<div class="w-[calc((100%-70px)/5)] truncate flex flex-col items-start">
					<span class="text-gray-500">合同剩余金额</span><span>{{ item.reduceContractAmount ?? '-' }}</span>
				</div>
			</div>

			<template v-if="!activeKey">
				<!-- 收款信息 -->
				<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">收款信息</div>
				<div>
					<div v-for="(itemVal, index) in payInfoList" :key="index">
						<div class="flex justify-end">
							<a-button v-if="index === 0" type="link" @click="addPayInfo">新增</a-button>
							<a-button v-if="payInfoList.length > 1" type="link" @click="removePay(index)">删除</a-button>
						</div>
						<a-row class="border border-solid border-gray-300 px-3 pt-2 pb-4">
							<a-col :span="12" class="flex mb-[10px]">
								<div class="text-gray-500 my-1 w-[80px]">收款方式</div>
								<a-select class="w-[320px]" v-model:value="itemVal.companyAccountId" :options="payOptions"></a-select>
							</a-col>
							<a-col :span="12" class="flex mb-[10px]">
								<div class="text-gray-500 my-1 w-[80px]">收款时间</div>
								<a-date-picker v-model:value="itemVal.payTime" valueFormat="YYYY-MM-DD hh:mm:ss" class="w-[320px]" />
							</a-col>
							<a-col :span="12" class="flex">
								<div class="text-gray-500 my-1 w-[80px]">到账金额</div>
								<a-input-number v-model:value="itemVal.receivedAmount" min="0" class="w-[320px]"></a-input-number>
							</a-col>
							<a-col :span="12" class="flex">
								<div class="text-gray-500 my-1 w-[80px]">手续费</div>
								<a-input-number v-model:value="itemVal.commission" min="0" class="w-[320px]"></a-input-number>
							</a-col>
						</a-row>
					</div>
				</div>
				<div class="flex items-start mt-[30px]">
					<div class="w-[60px] pr-2">备注</div>
					<a-textarea v-model:value="remark" placeholder="请输入" :rows="4" />
				</div>
				<!-- 通过驳回按钮 -->
				<div class="flex justify-center gap-6 pt-6">
					<a-button type="primary" :loading="loading" @click="pass">通过</a-button>
					<a-button @click="rejectVisible = true">驳回</a-button>
				</div>
			</template>
			<template v-else-if="transStatus">
				<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">其他信息</div>
				<div class="flex flex-wrap gap-4 my-6">
					<div class="w-[calc((100%-50px)/4)] truncate">
						<span class="text-gray-500">签约方式</span><span class="ml-3">{{ signMethodEnum[item.signMethod] }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate">
						<span class="text-gray-500">签约场景</span
						><span class="ml-3">{{ $TOOL.dictTypeData('SignPayment', item.signPayment) }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate">
						<span class="text-gray-500">合同创建人</span><span class="ml-3">{{ item.createUserName || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate">
						<span class="text-gray-500">创建时间</span><span class="ml-3">{{ item.createAt || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">签约日期</span
						><span style="white-space: normal">{{ item.signingDate || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/3)] truncate flex flex-col items-start">
						<span class="text-gray-500">合同备注</span><span>{{ item.remark || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/2)] truncate flex flex-col items-start">
						<span class="text-gray-500">付款凭证</span
						><span>
							<media-section :url-str="item.voucherImg" />
						</span>
					</div>
					<div class="w-[calc((100%-50px)/2)] truncate flex flex-col items-start">
						<span class="text-gray-500">合同照片</span
						><span>
							<media-section :url-str="item.contractImg" />
						</span>
					</div>
				</div>

				<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">审批信息</div>
				<div class="flex flex-wrap gap-4 my-6">
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">业务审批状态</span
						><span style="white-space: normal">{{ approvalStatusEnum[item.approvalStatus] || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">业务审批时间</span><span>{{ item.approvalTime || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">业务审批备注</span><span>{{ item.approvalRemark || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">财务审批状态</span
						><span style="white-space: normal">{{ approvalStatusEnum[item.financeApprovalStatus] || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">财务审批时间</span
						><span style="white-space: normal">{{ item.financeApprovalTime || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">财务审批备注</span><span>{{ item.financeRemark || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">驳回原因</span
						><span>{{ item.rejectReason || item.approvalRejectReason || '-' }}</span>
					</div>
				</div>

				<template v-if="item.payList && item.payList.length > 0">
					<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">财务收款信息</div>
					<div v-for="(itemChild, indexChild) in item.payList" :key="indexChild" class="flex text-left py-6">
						<div class="flex-1">
							<div class="text-gray-500">收款方式</div>
							<div>{{ itemChild.companyAccountName || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">收款时间</div>
							<div>{{ itemChild.payTime.substr(0, 10) || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">到账金额</div>
							<div>{{ itemChild.receivedAmount + '' || '-' }}</div>
						</div>
						<div class="flex-1">
							<div class="text-gray-500">手续费</div>
							<div>{{ itemChild.commission + '' || '-' }}</div>
						</div>
					</div>
				</template>

				<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">合同转换信息</div>
				<div class="flex flex-wrap gap-4 my-6">
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">合同转换人</span
						><span style="white-space: normal">{{ item.transUserName || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">合同转换时间</span><span>{{ item.transTime || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">转化类型</span><span>{{ transTypeEnum[item.isTotal] || '-' }}</span>
					</div>
					<div class="w-[calc((100%-50px)/4)] truncate flex flex-col items-start">
						<span class="text-gray-500">合同可转化金额</span
						><span style="white-space: normal">{{ item.transContractAmount || '-' }}</span>
					</div>
				</div>
			</template>

			<div v-if="index < contractInfoList.length - 1" class="h-[20px] bg-gray-200"></div>
		</div>
	</a-modal>
	<!-- 驳回确认弹框 -->
	<a-modal v-model:visible="rejectVisible" title="审核" @ok="reject">
		<div>
			<div class="text-gray-500 mb-4">驳回意见(必填)</div>
			<a-textarea v-model:value="rejectReason" placeholder="请输入" :rows="4"></a-textarea>
		</div>
	</a-modal>
</template>
<script setup>
	import erpApi from '@/api/biz/bizCommonApi'
	import contractApi from '@/api/biz/bizContractApi'
	import { message } from 'ant-design-vue'
	import { signMethodEnum, approvalStatusEnum, transTypeEnum } from './enum/contractEnum'
	import mediaSection from './mediaSection.vue'

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => ({ list: [] })
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])

	const transStatus = computed(() => props.info.contractType === 'TRANS')

	const contractInfoList = ref([props.info])

	const activeKey = ref(0)
	const onTabChange = (value) => {
		if (!value) {
			contractInfoList.value = [props.info]
		} else {
			contractApi
				.getHistoryContractDetail({ id: props.info.id, type: 0 })
				.then((res) => {
					contractInfoList.value = res
				})
				.catch((err) => {
					contractInfoList.value = []
				})
		}
	}

	onBeforeMount(() => {
		getCompanyAccount()
	})

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 200,
			fixed: 'left',
			customRender: ({ text }) => text || '-'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 100,
			ellipsis: true
		},
		{
			title: '服务类目',
			dataIndex: 'serviceProjectName',
			width: 300,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${record.serviceTypeName} > ${text}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 100,
			ellipsis: true
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 100,
			ellipsis: true
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 100,
			ellipsis: true
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 100,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 100,
			customRender: ({ text }) => text || '-'
		}
	]
	const historyColumns = [
		...columns,
		{
			title: '备注',
			dataIndex: 'orderStatus',
			width: 100,
			customRender: ({ text }) => (text === 'CONVERTED' ? '已转换' : '-')
		}
	]

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const payInfoList = ref([
		{
			commission: 0,
			payTime: undefined,
			receivedAmount: undefined,
			companyAccountId: undefined
		}
	])
	const payOptions = ref([])
	const getCompanyAccount = () => {
		erpApi.getCompanyAccount().then((res) => {
			payOptions.value = res.map((item) => {
				return {
					...item,
					value: item.id,
					label: item.accountType
				}
			})
			payEnum.value = toEnum(payOptions.value)
		})
	}
	const toEnum = (value) => {
		return Object.fromEntries(
			value.map((item) => {
				const arr = []
				arr[0] = item.value
				arr[1] = item.label
				return arr
			})
		)
	}
	const payEnum = ref({})
	/**
	 * 新增付款信息
	 */
	const addPayInfo = () => {
		payInfoList.value.push({
			commission: 0,
			payTime: undefined,
			receivedAmount: undefined,
			companyAccountId: undefined
		})
	}
	/**
	 * 删除付款信息
	 * @param {*} index 索引
	 */
	const removePay = (index) => {
		payInfoList.value.splice(index, 1)
	}
	/**
	 * 备注
	 */
	const remark = ref(null)

	/**
	 * 通过
	 */
	const loading = ref(false)
	const pass = () => {
		let check = false
		payInfoList.value.map((item) => {
			item.companyAccountName = payEnum.value[item.companyAccountId]
			const flag = Object.values(item).some((v) => !v && v !== 0)
			if (flag) {
				check = flag
			}
		})
		if (check) {
			message.warning('请完善审批信息')
			return
		}
		loading.value = true
		const params = {
			type: 0,
			list: payInfoList.value,
			id: props.info.id,
			remark: remark.value
		}
		contractApi
			.approval(params)
			.then(() => {
				emits('update:visible', false)
				emits('finished')
			})
			.finally(() => {
				loading.value = false
			})
	}
	/**
	 * 驳回逻辑
	 */
	const rejectReason = ref('')
	const rejectVisible = ref(false)
	const reject = () => {
		if (!rejectReason.value) {
			message.warning('请填写拒绝原因')
			return
		}
		const params = {
			type: 1,
			rejectReason: rejectReason.value,
			id: props.info.id
		}
		contractApi.approval(params).then(() => {
			rejectVisible.value = false
			emits('update:visible', false)
			emits('finished')
		})
	}
</script>
<style lang="less" scoped>
	:deep(.ant-input-number-handler-wrap) {
		display: none;
	}
</style>
